<template>
    <div>
        <div class="recommend-title">
            <span class="iconfont icon-heart">&#xe757;</span>猜你喜欢
        </div>
        <ul>
            <router-link :to="'/detail/' + item.id " class="list-item" v-for="(item,index) of recommendList" :key="index" tag="li">
                <div class="item-img">
                    <img  :src="item.imgUrl" alt="">
                    <div class="item-img-title">今日头条</div>
                </div>
                <div class="item-info">
                    <div class="item-info-title">{{ item.title }}</div>
                    <div class="item-info-starts">
                        <span class="iconfont icon-star">&#xe670;</span>
                        <span class="iconfont icon-star">&#xe670;</span>
                        <span class="iconfont icon-star">&#xe670;</span>
                        <span class="iconfont icon-star">&#xe670;</span>
                        <span class="iconfont icon-star">&#xe670;</span>
                        <span class="comment-num">{{ item.commentNum }}条评论</span>
                    </div>
                    <div class="info-price">
                        <span class="price"><em>￥{{ item.price }}</em>起</span>
                        <span class="district">{{ item.address }}</span>
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Recommend',
    props: {
        recommendList: Array
    }
}
</script>

<style lang="stylus"  scoped>
@import '../../../assets/styles/variables.styl';
@import '../../../assets/styles/mixins.styl';

    div{
        box-sizing: border-box;
    }

    .recommend-title{
        width: 100%;
        height: .8rem;
        line-height: .8rem;
        font-size: .32rem;
        background-color: #eee;
        padding: 0 .2rem;
    }

    .recommend-title .icon-heart{
        color: #FF4040;
    }

    .list-item{
        display: flex;
        width: 100%;
        height: 2.4rem;
        border-bottom: 0.01rem solid #eee; 
    }

    .list-item .item-img{
        position: relative;
        width: 2.4rem;
        height: 2.4rem;
        padding: .2rem;
    }

    .list-item .item-img img{
        width: 100%;
    }

    .list-item .item-img .item-img-title{
        position: absolute;
        top: .2rem;
        left: .2rem;
        width: 1.22rem;
        height: .38rem;
        line-height: .38rem;
        background-image: url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png);
        background-size: 100% 100%;
        font-size: .18rem;
        text-indent: .1rem;
    }

    .list-item .item-info{
        position: relative;
        flex: 1;
        padding: .2rem .1rem;
    }

    .list-item .item-info .item-info-title{
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        font-size: .32rem;
        ellipsis();
    }

    .list-item .item-info .item-info-starts .icon-star{
        font-size: .2rem;
	    color: #ffb436;
    }

    .list-item .item-info .item-info-starts .comment-num{
        color: $lightTxtColor;
    }

    .list-item .item-info .info-price {
        position: absolute;
        bottom: .2rem;
        width:100%;
        height: .64rem;
        line-height.64rem;
        font-size: .2rem;
    }
    .list-item .item-info .info-price .price{
        position: absolute;
        left: 0;
    }

    .list-item .item-info .info-price .price em{
        color: #ffb436;
        font-size: .32rem;
    }

    .list-item .item-info .info-price .district{
        position: absolute;
        right: .3rem;
    }


</style>